<template>
  <div class="user-profile">
    <!-- 导航 -->
    <van-nav-bar
      class="app-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航 -->

    <!-- 
      因为input的type为file时，才会出现选择文件，所以需要借助于input 
    -->
    <input
      accept="image/*" 
      type="file" 
      hidden 
      ref="inputfile"
      @change="onFileChange"
    >
    <!-- 头像 -->
    <van-cell 
      title="头像" 
      value="内容" 
      is-link 
      center
      @click="photoClick"
    >
      <van-image 
        width="30" 
        height="30" 
        round 
        :src="user.photo" 
      />
    </van-cell>

    <!-- 昵称 -->
    <van-cell title="昵称" :value="user.name" is-link @click="isEditNameShow = true" />

    <!-- 性别 -->
    <van-cell 
      title="性别" 
      :value="user.gender === 1 ? '女' : '男'" 
      is-link 
      @click="isEditGenderShow = true"
    />

    <!-- 生日 -->
    <van-cell 
      title="生日" 
      :value="user.birthday" 
      is-link 
      @click="isEditBirthdayShow = true"
    />

    <!-- 修改昵称pop -->
    <!-- 
      van-popup：懒加载，会有那个数据仍在的，用v-if条件渲染来进行组件的重新渲染，则数据就更新
     -->
    <van-popup
      class="edit-name-wrap"
      v-model="isEditNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!-- 
      平常的都是
      :name="user.name"
      @update-name="user.name = $event"

      当你传递给子组件的数据既要使用又要修改，例如这里的name 
      这种情况下我们可以使用 v-model 简写
     -->
      <!-- 
      v-model="user.name"
        默认传递一个名字叫 value的数据
        :value="user.name"
        默认监听 input事件 @input="user.name = $event"

      v-model的本质还是父子组件通信，它仅仅是简化了父组件的使用。
     -->
      <!-- 

      v-model只能使用一次，不能设置多个属性，需要多个属性的时候，则这就可以使用 .sync 修饰符

      -->
      <!-- 
        如果有多个数据需要保持同步，使用.sync 修饰符。
        :gender="user.gender"
        @update-gender="user.gender = $event"

        :gender.sync="user.gender"
          <=> :gender="user.gender"
              @update:gender="user.gender=$event"
        事件是 @update:属性名称="user.gender=$event"

        我们一般把最常用的数据设计为v-model绑定，把不太常用的数据设计为 .sync。

       -->

      <edit-name
        v-if="isEditNameShow"
        v-model="user.name"
        @close="isEditNameShow = false"
        :gender.sync="user.gender"
        :abc.sync="user.name"
        :a.sync="user.name"
      />
    </van-popup>

    <!-- 修改性别 v-if条件渲染 .sync绑定-->
    <van-popup
      class="edit-gender-wrap"
      v-model="isEditGenderShow"
      position="bottom"
    >
      <edit-gender
        v-if="isEditGenderShow"
        v-model="user.gender"
        :gender.sync="user.gender" 
        @close="isEditGenderShow = false"
      />
    </van-popup>

    <!-- 修改生日 v-if条件渲染 v-model绑定-->
    <van-popup
      class="edit-birthday-wrap"
      v-model="isEditBirthdayShow"
      position="bottom"
    >
      <edit-birthday
        v-if="isEditBirthdayShow"
        v-model="user.birthday"
        @close="isEditBirthdayShow = false"
      />
    </van-popup>

    <!-- 修改头像 v-if条件渲染 这个不能用v-model绑定，因为是不一样的-->
    <van-popup
      class="edit-photo-wrap"
      v-model="isEditPhotoShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <!-- <edit-photo 
        :image-blob="previewImage"
      ></edit-photo> -->
      <edit-photo 
        v-if="isEditPhotoShow"
        :file="previewImage"
        @update-photo="updatePhoto"
        @close="isEditPhotoShow = false"
      ></edit-photo>
    </van-popup>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/user";
import EditName from "./components/edit-name";
import EditGender from './components/edit-gender';
import EditBirthday from './components/edit-birthday';
import EditPhoto from './components/edit-photo';

export default {
  name: "UserProfile",
  components: {
    EditName,
    EditGender,
    EditBirthday,
    EditPhoto
  },
  props: {},
  data() {
    return {
      // 用户信息
      user: {},
      // 昵称pop
      isEditNameShow: false,
      // 修改性别
      isEditGenderShow: false,
      // 修改生日
      isEditBirthdayShow: false,
      // 修改头像
      isEditPhotoShow: false,
      // 预览图片
      previewImage: null
    };
  },
  computed: {
    file () {
      return this.$refs.inputfile
    }
  },
  watch: {},
  methods: {
    async loadUserProfile() {
      try {
        const { data } = await getUserProfile();
        this.user = data.data;
      } catch (err) {}
    },
    photoClick() {
      console.log('photoClick');
      // cell的点击，去主动触发input的file类型的点击事件
      this.file.click();
    },
    // 只要选中了input的change事件，则调用这个方法
    onFileChange() {
      console.log('onFileChange');
      // 在弹出层里面预览图片
      this.previewImage = this.file.files[0];
      // const blob = window.URL.createObjectURL(this.file.files[0]);
      // this.previewImage = blob;
      // console.log('输出图片blob',this.previewImage,blob);

      // 展示弹出层 显示预览
      this.isEditPhotoShow = true;

      // 为了解决相同文件不触发change事件，所以在这里手动的清空file的value
      this.file.value = '';
    },
    updatePhoto (imageBlob) {
      this.user.photo = imageBlob;
    }

  },
  created() {
    this.loadUserProfile();
  },
  mounted() {
    // 如果预览的图像发生变化，
    // 方法1： 用v-if条件渲染
    // 方法2： 用replace，在mounted
  },
};
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.edit-name-wrap {
  background-color: #f5f7f9;
}
.edit-photo-wrap {
  background-color: #000;
}

</style>
